<template>
  <div>
    <h1 class="class1">orderList</h1>

    <div class="class2">
      <div class="column-1">11111111</div>
      <div class="column-2">12222222222222</div>
      <div class="column-3">333333333333333333</div>
      <div class="column-4">4444444444444</div>
      <div class="column-5">5555555555555</div>
    </div>

<!--    <viewer :images="images" v-viewer="{zoomable: false,scalable:false}">-->
<!--        <img style="width: 500px" v-for="src in images" :src="src" :key="src">-->
<!--    </viewer>-->
    <!-- 下边这个可以使用 上边的这个使用v-viewer无效 -->
    <div class="images" v-viewer="{zoomable: false,scalable:false}">
      <img style="width: 500px" v-for="src in images" :src="src" :key="src">
    </div>
  </div>

</template>

<script>
  import img0 from "@/assets/img/0.jpg"
  import img1 from "@/assets/img/1.jpg"
  import img2 from "@/assets/img/2.jpg"
  export default {
    name: "orderList",
    data() {
      return{
        images: [img0, img1,img2]
      }
    },
  }
</script>

<style lang="less" scoped>

  // 首字母下沉
  .first-letter(@font-size: 46px) {
    &::first-letter {
        float: left;
        line-height: 1;
        font-size: @font-size;
    }
  }
  /*// 使用示例 .flex(wrap,v,align-center,justify-center)
  .flex(@rest...) {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    .mixin(wrap) {
      -webkit-box-lines: multiple;
      --webkit-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .mixin(v) {
      -webkit-box-orient: vertical;
      --webkit-flex-direction: column;
      flex-direction: column;
    }

    .mixin(align-center) {
      -webkit-box-align: center;
      --webkit-align-items: center;
      align-items: center;
    }

    .mixin(justify-center) {
      -webkit-box-pack: center;
      --webkit-justify-content: center;
      justify-content: center;
    }

    .loop(@i) when (@i > 0) {
      .loop((@i - 1));
      .mixin(extract(@rest, @i));
    }

    .loop(length(@arguments));
  }

   以上是定义，以下是使用
  .flex("wrap","v","align-center","justify-center")
  */

  /*
  .mixin(@value) when (ispixel(@value)) {
    width: @value;
    background-color: chartreuse;
  }
  .mixin(@value) when not(default())    {
    padding: (@value / 5);
    background-color: pink;
  }

  .class1 {
    .mixin(100px);
  }

  .class2 {

    .mixin(100%);
  }

  /*
  // Variables
  @images: "../img"; 这个没试过但是感觉可能能用

  // Usage
  body {
    color: #444;
    background: url("@{images}/white-sand.png");
  }

/*
 // @my-selector: class;
  @a: class;

  // Usage
  //.@{my-selector} {
  .@{a} {
    background-color: pink;
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
  }

  /*
  .column {
    &-1 {
      background-color: greenyellow;
    }
    &-2 {
      background-color: pink;
    }

    &-3 {
      background-color: blue;
    }
  }



  /*
  .mixin() {
    // transform+_: scale(2); 这个可以添加下划线也可以不添加
    // transform: scale(2); +是必须要有的
    transform+: scale(2);
  }
  .class1 {
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 100px;
    background-color: yellowgreen;
    .mixin();
    transform+_: rotate(15deg); // 必须添加下划线
  }

  /*
  .class {
    box-shadow: inset 0 0 10px black, 0 0 20px red;
  }
  // 上下两个的效果一样

  // +号不能省
  .mixin() {
    box-shadow+: inset 0 0 10px black; // 内部shadow
  }
  .class {
    .mixin();
    box-shadow+: 0 0 20px red; // 默认的是外部shadow
  }

  /*

  .generate-columns(6);

  .generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
      background-color: rgb(@i/@n*255,@i/@n*255,@i/@n*255);
      color: rgb(0,@i/@n*255,@i/@n*255);
    }
    .generate-columns(@n, (@i + 1));
  }


  /*
  @age:desktop; 可渲染

  .mixin (@a) when (@age = mobile) {
    background-color: pink;
  }
  .mixin (@a) when (@age = desktop) {
    background-color: greenyellow;
  }

  .class{
    .mixin(1)
  }

  /*
  @a:true; // 能渲染
  @a:false; // 不能渲染
  .class when (@a = true) {
    color: red;
  }

  /*
  .mixin (@a) when (@a > 10), (@a < -10) {
    background-color: greenyellow;
  }
  .class{
    // .mixin(90);
    .mixin(-9) // 不渲染
  }

/*
  .mixin (@a) when (isnumber(@a)) and (@a > 0)
  {
    background-color: greenyellow;
  }

  .class{
    // .mixin(-23); 不渲染
    .mixin(23)
  }

  // 下边这个不渲染
  // .class{
  //   .mixin(true)
  // }
  /*
  .truth (@a) when (@a) {
    background-color: greenyellow;
  }
  .truth (@a) when (@a = true) {
    background-color: pink;
  }

  .class {
     .truth(40); // 那个也匹配不到
    // .truth(true); // @a = true 能匹配到
    // .truth(false); // 那个也匹配不到

  }

  /*
  .mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
  }
  .mixin (@a) when (lightness(@a) < 50%) {
    background-color: pink;
  }
  .mixin (@a) {
    color: @a;
  }

  //.class1 { .mixin(#fff000) }
  //.class2 { .mixin(#ffefff) }

  .class1 { .mixin(#eee) }
  .class2 { .mixin(#111) }


  /*
  .desktop-and-old-ie(@total) {
    // 当可视区宽度大于1200px后显示下边的样式 @rules代表着传递过来的所有
    @media screen and (min-width: 1200px) { @total(); }
  }

  .class {
    background-color: blue;

    .desktop-and-old-ie({
      background-color: pink;
      border: 1px solid red;
    });
  }


  /*
  .unlock(@value,@rest...) { // outer mixin
    border: @rest;
    .doSomething() { // nested mixin
      color: @value;
    }
  }

  .class {
    .unlock(blue,1px,solid,green); // unlock doSomething mixin
    .doSomething(); //nested mixin was copied here and is usable
  }



  /*
  .a() {
    @width:  100%;
    @height: 200px;
    @color: green;
  }

  .class {
    width:  @width;
    height: @height;
    color: @color;
    .a();
  }



  /*
  .a(@color,@rest...){
    color: @color;
    border: @rest;
  }
  .class{
    .a(red,1px,solid,black)
  };


  /*
  .a(dark; @color) {
    color: darken(@color, 10%);
  }
  .a(light; @color) {
    color: lighten(@color, 10%);
  }
  .a(@_; @color) {
    display: block;
  }

  @switch: dark;

  .class {
    .a(@switch; #fff);
  }

  #my-library {
    .my-mixin() {
      color: red;
    }
  }
  // which can be used like this
  .class {
    #my-library.my-mixin();
  }

  .first-letter();
  */





</style>
